<template>
  <a-select
    :allowClear="true"
    placeholder="请选择"
    v-model:value="selectedEditionIndex"
    @change="selectChange"
  >
    <a-select-option v-for="(item, index) of editions" :key="index" :value="item.value">{{
      item.displayText
    }}</a-select-option>
  </a-select>
</template>

<script lang="ts">
  import { AppComponentBase } from '/@/shared/component-base';
  import {
    EditionServiceProxy,
    SubscribableEditionComboboxItemDto,
  } from '/@/shared/service-proxies';
  import { defineComponent } from 'vue';
  export default defineComponent({
    name: 'EditionSelect',
    mixins: [AppComponentBase],
    props: {
      value: {
        type: [String],
      },
      multiple: {
        type: Boolean,
      },
    },
    emits: ['update:value', 'change'],
    data() {
      return {
        editionService: new EditionServiceProxy(), // 版本信息api
        editions: new Array<SubscribableEditionComboboxItemDto>(), // 所有的版本信息
        editionIdVal: this.editionId, // 版本id
      };
    },
    computed: {
      selectedEditionIndex: {
        get() {
          return this.value;
        },
        set(val) {
          this.$emit('update:value', val);
        },
      },
    },
    mounted() {
      this.editionService.getEditionComboboxItems(0, true, false).then((editions) => {
        this.editions = editions;
      });
    },
    methods: {
      selectChange(e) {
        if (!!e) {
          this.selectedEditionIndex = e;
          this.$emit(
            'change',
            this.editions.find((item) => {
              return (item.value = e);
            }),
          );
          return;
        }
        this.$emit('change', null);
      },
    },
  });
</script>

<style lang="less" scoped>
  .ant-select {
    width: 100%;
  }
</style>
